<template>
	<div class="icons">
		<swiper :options="swiperOption">
			<swiper-slide v-for="(page,index) in pages" :key="index">
				<div class="icon" v-for="item of page" :key="item.id">
					<div class="icon-img">
						<img class="img-context" :src="item.imgUrl" />
					</div>
				<p class="icon-text">{{item.desc}}</p>
				</div>
			</swiper-slide>
		</swiper>
		
	</div>	
</template>

<script>
export default {
  name:'HomeIcons',
  props:{
  	list:Array
  },
  data(){
  	return{
  		swiperOption:{
  			autoplay:false
  		}
  	}
  },
  computed:{
  	pages (){
  		const pages=[]
  		this.list.forEach((item,index)=>{
  			const page=Math.floor(index/8)
  			if(!pages[page]){
  				pages[page]=[]
  			}
  			pages[page].push(item)
  		})
  		return pages
  	}
  }
}
</script>

<style lang="stylus" scoped>
  .icons >>>.swiper-container
    /*overflow:hidden*/
    width:100%
    height:0
    padding-bottom:50%
  .icon
    position:relative
    float:left
    width:25%
    height:0
    padding-bottom:25%
    .icon-img
      position:absolute
      top:0
      left:0
      right:0
      bottom:.44rem
      box-sizing:border
      padding:.1rem
      .img-context
        display:block
        margin:0 auto
        height:100%
    .icon-text
      text-align:center
      height:.44rem
      line-height:.44rem 
      position:absolute
      left:0
      right:0
      bottom:0
      overflow:hidden
      white-space:nowrap
      text-overflow:ellipsis
</style>